<template>
  <div class="index">
    <mt-header fixed title="活动" style="background-color: #ff4d4f;color:#fff">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <!-- <mt-search style="z-index:99999" fixed class="search" v-model="value" placeholder="搜索"></mt-search> -->
  </div>
</template>

<script>
import https from "../../utils/http.js";
import { Swiper, Slide } from "vue-swiper-component";
import wx from "weixin-js-sdk";
export default {
  props: {},
  data() {
    return {
      value: "",
      index_list: [],
      wrapperHeight: 0,
      PageTotal: 0,
      courrentPage: 1,
      zsData: [],
      popupVisible: false,
      title: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getWXcode();
    // this.wrapperHeight =
    //   document.documentElement.clientHeight -
    //   this.$refs.wrapper.getBoundingClientRect().top;
  },
  watch: {},
  methods: {
    getWXcode() {
      let wechaturl = window.location.href.split("#")[0];
      console.log(wechaturl);
      https({
        method: "get",
        url: "/api/v1/WxJs/GetJsConfig/" +encodeURIComponent(wechaturl),
        data: {}
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            this.list = res.Data.RecordList;
            wx.config({
              debug: true, // 开启调试模式
              appId: res.Data.appId, // 必填，公众号的唯一标识
              timestamp: res.Data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.Data.nonceStr, // 必填，生成签名的随机串
              signature: res.Data.signature, // 必填，签名，见附录1
              jsApiList: ["openLocation", "chooseImage", "translateVoice"]
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
      wx.ready(res => {
        console.log(res);
        wx.getLocation({
          success: function(res) {
            console.log(res);
            var pointY = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            var pointX = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var wxaccuracy = res.accuracy;
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(pointX, pointY);
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function(rs) {
              var addComp = rs.addressComponents;
              if (wxaccuracy == 30) {
                alert(addComp.city);
              }
            });
          },
          cancel: function(res) {
            alert("用户拒绝授权获取地理位置");
          }
        });
      });
    }
  },
  components: { Swiper, Slide }
};
</script>

<style scoped lang="less">
.index {
  margin: 0;
  .search {
    width: 80%;
    position: fixed;
    top: -0.5vw;
    left: 10%;

    border-radius: 20px;
  }
  .list {
    width: 100%;
    background-color: #fff;
    overflow: scroll;
    height: 100%;

    ul {
      width: 100%;
      margin: 0;
      padding: 0;
      height: 100%;
      margin-bottom: 10px;
      li {
        width: 100%;
        list-style: none;
        height: 6rem;
        border-bottom: 1px solid #eee;
        position: relative;
        overflow: hidden;
        .left {
          width: 30%;
          height: 6rem;
          float: left;

          text-align: center;
          img {
            margin-top: 1rem;
          }
        }
        .content {
          width: 40%;
          height: 6rem;
          float: left;
          p {
            text-align: center;
            font-size: 28px;
            margin-top: 10px;
          }
          .btn {
            border: 1px solid #eee;
            height: 1.5rem;
            font-size: 0.8rem;
            margin-top: 0.5rem;
            line-height: 1.5rem;
            margin-left: 0.5rem;
          }
          div {
            text-align: center;
          }
        }
        .rigth {
          width: 30%;
          height: 6rem;
          float: left;
          text-align: center;
          img {
            margin-top: 1rem;
          }
        }
      }
    }
  }
  .zsPopup {
    width: 80%;
    margin-left: 10%;
    div {
      width: 33%;
      float: left;
      margin: 20px 0;
      text-align: center;
      border-right: 1px solid #999;
      p {
        font-size: 30px;
      }
    }
  }
  .times {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: 999999;
  }
  .logon {
    position: absolute;
    top: 15px;
    right: -37px;
    width: 160px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    z-index: 999999;
    background: red;
    color: #fff;
    font-size: 14px;
    transform: rotate(35deg);
  }
}
</style>
